<template>
  <div>
    <h1 style="margin: 20px 50px;display: inline-block">身高体重分析</h1>

    <el-form style="display: inline-block" ref="" :inline="true" label-width="68px">
      <el-form-item label="用户" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item label="学期" prop="xueQi">
        <el-input
          v-model="queryParams.xueQi"
          placeholder="请输入学期"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索
        </el-button>
      </el-form-item>
    </el-form>

    <hr>
    <div style="margin: 0 50px">
      <div id="echarts_box" style="min-width: 400px;height:500px; display: inline-block"></div>

      <div id="echarts_box1" style="min-width: 350px;height:500px; display: inline-block"></div>

      <div id="echarts_box2" style="min-width: 400px;height:500px; display: inline-block"></div>

    </div>
  </div>
</template>


<script>
import echarts from 'echarts'

import {getTypeList, getBorrowList, getBmiList} from "@/api/report/notice";

export default {
  name: "Content",
  data() {
    return {
      name: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 藏品文档表格数据
      contentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xueQi: null,
        userName: null,
        contentInfoName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        contentInfoName: [
          {required: true, message: "藏品名称不能为空", trigger: "blur"}
        ],
      },
      typeList: [],
      typeDataList: []
    };
  },

  methods: {
    getList() {

      // 1. 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts_box'))

      var myChart1 = echarts.init(document.getElementById('echarts_box1'))

      var myChart2 = echarts.init(document.getElementById('echarts_box2'))

      getTypeList(this.queryParams).then(response => {
        let name = response.data;

        console.log("name==>", name.key)
        console.log("value==>", name.value)

        myChart.setOption({
          title: {
            text: '当前身高'
          },
          tooltip: {},
          legend: {
            data: ['身高']
          },
          xAxis: {
            data: name.key
          },
          yAxis: {},
          series: [{
            name: '身高',
            type: 'line',
            data: name.value
          }]
        });
      });

      getBorrowList(this.queryParams).then(response => {
        let name = response.data;

        console.log("name==>", name.key)
        console.log("value==>", name.value)

        myChart1.setOption({
          title: {
            text: '当前体重'
          },
          tooltip: {},
          legend: {
            data: ['体重']
          },
          xAxis: {
            data: name.key
            // data: ["梅兰芳黑胶唱片", "兽耳方尊数字藏品", "3D\"飞天\"系列", "敦煌飞天壁画数字藏品", "王羲之传世墨宝数字藏", "潮流数字头像"]
          },
          yAxis: {},
          series: [{
            name: '体重',
            type: 'bar',
            data: name.value,
            itemStyle: {
              color: '#91cc75',
              shadowColor: '#91cc75',
              borderType: 'dashed',
              opacity: 0.5,
            }
          }]
        });
      });

      getBmiList(this.queryParams).then(response => {
        let name = response.data;

        console.log("name==>", name.key)
        console.log("value==>", name.value)

        myChart2.setOption({
          title: {
            text: '当前BMI指数'
          },
          tooltip: {},
          legend: {
            data: ['BMI']
          },
          xAxis: {
            data: name.key
          },
          yAxis: {},
          series: [{
            name: 'BMI',
            type: 'gauge',
            data: name.value
          }]
        });
      });
    }
  },

  created() {

  },

  mounted() {

    // 1. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_box'))

    var myChart1 = echarts.init(document.getElementById('echarts_box1'))

    var myChart2 = echarts.init(document.getElementById('echarts_box2'))

    getTypeList(this.name).then(response => {
      let name = response.data;

      console.log("name==>", name.key)
      console.log("value==>", name.value)

      myChart.setOption({
        title: {
          text: '当前身高'
        },
        tooltip: {},
        legend: {
          data: ['身高']
        },
        xAxis: {
          data: name.key
        },
        yAxis: {},
        series: [{
          name: '身高',
          type: 'line',
          data: name.value
        }]
      });
    });

    getBorrowList(this.name).then(response => {
      let name = response.data;

      console.log("name==>", name.key)
      console.log("value==>", name.value)

      myChart1.setOption({
        title: {
          text: '当前体重'
        },
        tooltip: {},
        legend: {
          data: ['体重']
        },
        xAxis: {
          data: name.key
          // data: ["梅兰芳黑胶唱片", "兽耳方尊数字藏品", "3D\"飞天\"系列", "敦煌飞天壁画数字藏品", "王羲之传世墨宝数字藏", "潮流数字头像"]
        },
        yAxis: {},
        series: [{
          name: '体重',
          type: 'bar',
          data: name.value,
          itemStyle: {
            color: '#91cc75',
            shadowColor: '#91cc75',
            borderType: 'dashed',
            opacity: 0.5,
          }
        }]
      });
    });

    getBmiList(this.name).then(response => {
      let name = response.data;

      console.log("name==>", name.key)
      console.log("value==>", name.value)

      myChart2.setOption({
        title: {
          text: '当前BMI指数'
        },
        tooltip: {},
        legend: {
          data: ['BMI']
        },
        xAxis: {
          data: name.key
        },
        yAxis: {},
        series: [{
          name: 'BMI',
          type: 'gauge',
          data: name.value
        }]
      });
    });

  }
};
</script>

<style>
</style>
